<template>
<div class="login-container">
    <!-- 导航栏 -->
  <van-nav-bar
  class="page-nav-bar"
  title="登录"
>
  <van-icon
        slot="left"
        name="cross"
        @click="$router.back()"
      />
  </van-nav-bar>
<!-- 登录表单 -->
<van-form ref="loginFrom" @submit="onSubmit">
  <van-field
    v-model="user.mobile"
    name="mobile"
    placeholder="请输入手机号"
    :rules="userFormRules.mobile"
    type="number"
    maxlength="11"
  >
  <i slot="left-icon" class="toutiao toutiao-shouji"></i>
  </van-field>
  <van-field
    v-model="user.code" 
    name="code"
    placeholder="验证码"
    :rules="userFormRules.code"
    type="number"
    maxlength="6"
  >
   <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
   <template #button><!-- 新版本插槽的写法 ， 相当于slot="button" -->
          <van-count-down 
          v-if="isCountDownShow"
          :time="1000 * 60"
          format="ss s"
          @finish="isCountDownShow = false"
           />
          <van-button
          v-else
          class="send-sms-btn"
          native-type="button"
          round size="small"
          type="default"
          @click="onSendSms"
          >发送验证码</van-button>
        </template>
        <!--  第三种插槽方法 当只有一个内容标签时可以使用属性slot简写方式-->
        <!-- <van-button slot="button" class="send-sms-btn" round size="small" type="default">发送验证码</van-button> -->
  </van-field>
  <div style="margin: 16px;">
    <van-button  
    block 
    type="info" 
    native-type="submit" 
    class="login-btn" 
    >登录</van-button>
  </div>
</van-form>
</div>


</template>

<script>
// 校验表单 在from标签上添加上ref属性
import {login,sendSms} from '../../api/user'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
        user: {
         mobile: '',//用来接收手机号
         code: '',//接收验证码  
        },
        isCountDownShow:false,//用来表示显示还是隐藏的状态
        islogingood:false,//用来表示登录成功否
        userFormRules:{
            mobile:[{
              required:true,
              message : '手机号不能为空'
            },
            {
              pattern : /^1[3|5|7|8]\d{9}$/,
              message:'手机号格式不正确'
            }],
            code:[{
              required:true,
              message : '验证码不能为空'
            },{
              pattern: /^\d{6}$/,
              message: '验证码格式错误'
            }]
        }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
     async onSubmit() {
    //   console.log('submit', values);
    //   登录功能
    // 1.拿到数据
    // 2.封装请求
    // 3.获取请求过的内容
    // vant 提示组件
    this.$toast.loading({
      duration:0,//默认两秒钟
      message: '登录中...',
      forbidClick: true,//禁止点击背景
    })
      this.islogingood=false;
        try{
            const res=await login(this.user)
            this.$store.commit('setUser', res.data.data)
            this.$toast.success('登陆成功')
            // this.islogingood=true;
             this.$router.back()
        } catch(err){
          // console.log(err);
            if(err.response.status === 400){
                console.log('手机号或验证码错误', err);
                this.$toast.fail('登陆失败');
            }else{
                console.log('登录失败，请稍候重试', err);
                this.$toast.fail('登陆失败');
            }
        }
        // if(this.islogingood){
        //   location.href='http://localhost:8080/#/my'
        // }
    },
    async onSendSms(){
        // 验证手机号 vant里函数验证 只验证手机号 在标签中加上native-type属性值button 不让触发submit事件
        try {
          await this.$refs.loginFrom.validate ('mobile')
        }catch (err) {
          return console.log('验证失败',err)
        }
        // 显示倒计时
        this.isCountDownShow=true
        // 发送验证码
        try {
          await sendSms(this.user.mobile)
          this.$toast('发送成功')
        } catch (err) {
          // 发送失败，关闭倒计时
          console.log(err.response);
          this.isCountDownShow = false
          if (err.response.status === 429) {
            this.$toast('发送太频繁了，请稍后重试')
          } else {
            this.$toast('发送失败，请稍后重试')
          }
        }
        
    },
    
  }
}
</script>

<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 180px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 12px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>